---
import { pwaInfo } from 'virtual:pwa-info'

export interface Props {
  title: string;
}

const { title } = Astro.props
const origin = Astro.request.headers.get('host')
---

<!DOCTYPE html>
<html class="transition-background-color duration-200 ease-out" class:list={Astro.cookies.get('dark')?.boolean() ? ['dark'] : []}>
  <head>
    <meta charset="UTF-8" />
    <meta name="X-Frame-Options" content="sameorigin">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover,interactive-widget=resizes-content,user-scalable=no">
    <link rel="icon" type="image/svg+xml" href="/icon.svg">
    <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="320x320">
    <meta name="theme-color" content={Astro.cookies.get('dark')?.boolean() ? '#212129' : '#fbfbfb'}>
    <meta name="generator" content={Astro.generator}>
    <title>{title} - {origin}</title>
    <meta name="description" content="Chat for free with AI chatbot" />
    { import.meta.env.HEAD_SCRIPTS && <Fragment set:html={import.meta.env.HEAD_SCRIPTS } /> }
    { pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }
    { import.meta.env.PROD && pwaInfo && <Fragment set:html={pwaInfo.registerSW!.scriptTag} /> }
    <link rel="prefetch" href="https://ic.free-chat.asia/">
    <link rel="prefetch" href="https://promplate.dev/">
  </head>
  <body>
    <slot />
  </body>
</html>

<style is:global>
  :root {
    --c-bg: #fbfbfb;
    --c-fg: #444444;
    --c-scroll: #d9d9d9;
    --c-scroll-hover: #bbbbbb;
    scrollbar-color: var(--c-scrollbar) var(--c-bg);
  }

  html {
    font-family: system-ui, sans-serif;
    background-color: var(--c-bg);
    color: var(--c-fg);
    overflow-x: hidden;
  }

  html.dark {
    --c-bg: #212129;
    --c-fg: #ddddf0;
    --c-scroll: #333333;
    --c-scroll-hover: #555555;
  }
</style>

{ Astro.cookies.get('dark') === undefined
  && <script is:inline>
    if (localStorage.getItem('theme') !== 'light' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.documentElement.classList.add('dark')
      for (const element of document.querySelectorAll('circle[r]'))
        element.setAttribute('r', 9)
      document.querySelector('meta[name="theme-color"]')?.setAttribute('content', '#212129')
    }
  </script>
}
